<template>
  <main>
    <!-- 标题 -->
     <h1 style="text-align: center;">首页</h1>
    <!-- 导航区 -->
    <div style="text-align: center;">
    
    </div>
    <!-- 内容呈现 -->
    <div class="custom-content">
      <p>名字：{{ person.name }} 年龄：{{ person.age }} 资金：{{ money }}</p>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="changePerson">修改人</button>
      <button @click="changeMoney">修改资金</button>
      <p>名字：{{ person1.name }} 所拥有车辆:{{ person1.car.c1}} {{ person1.car.c2  }}</p>
      <button @click="updatePerson2Name">修改名字</button>
      <button @click="updatePerson2Car">修改第一辆车</button>
    </div>
  </main>
</template>

<script lang="ts">
export default {
  name: 'App'
}
</script>

<script setup lang="ts">
import { shallowRef,shallowReactive,ref } from 'vue';
// shallowRef浅层次的是响应式的
let money = shallowRef(0)
let person = shallowRef({
  name: 'zs',
  age:18
})

let person1 = shallowReactive({
  name: 'hh',
  age: 55,
  car: {c1:'奔驰',c2:'宝马'}
})
//shallowRef和shallowReactive
function changeMoney() { 
  money.value +=10
}
// 只对第一层的数据是响应式的，数据还是会修改
function changeName() { 
  person.value.name = 'ls'
}
// 只对第一层的数据是响应式的，数据还是会修改
function changeAge() { 
person.value.age += 1
}
function changePerson() { 
  person.value = {name:'ww',age:25}
}

function updatePerson2Name() { 
  person1.name = 'gg'
}
// 数据修改不了，因为用的shallowReactive 只能修改第一层的数据
function updatePerson2Car() { 
  person1.car.c1 = '保时捷'
}

</script>

<style lang="css">
.custom-a {
  display: inline-block;
  width: 50px;
  height: 20px;
  border: 1px solid black;
  margin-right: 50px;
  text-align: center;
  background-color: aqua;
}

.custom-a a {
  text-decoration: none;
  display: block;
  width: 50px;
  height: 20px;
}

.custom-content {

  margin: 0 auto;
  margin-top: 20px;
  border: 1px solid black;
  height: 700px;
  width: 1000px;
}

.custom-active {
  background-color: red;
}
</style>
